{% extends "base.html" %}
{% load staticfiles %}

{% block title %}历史回测{% endblock %}

{% block styles %}
    <style>

        /*表头上方的按钮样式*/
        .add-stg, .del-stg {
            width: 100px;
            height: 34px;
            margin-left: 15px;
            border-radius: 6px;
            color: white;
            border: 1px solid #ed8419;
        }

        .add-stg:hover, .del-stg:hover {
            background-color: #ed8419;
        }

        .add-stg {
            background-color: #ed6d00;
        }

        .del-stg {
            background-color: #d9534f;
        }

        /*toolbar样式*/
        .toolbar {
            margin-right: 150px;
        }

        .box-title {
            color: #444;
        }

        .box-header {
            display: block;
        }

        .even > th, .even > td {
            color: #333;
        }
    </style>

{% endblock %}

{% block content %}
    <!--业绩分析模态框-->
    <div class="modal fade" data-backdrop="static" id="modal_backtest_detail">
        <div class="modal-dialog" style="width: 1200px;height:600px">
            <div class="modal-content" style="background-color: #f5f5f5">
                <div class="modal-header" style="padding: 3px">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="padding: 5px 30px 0px 30px;height:auto;">
                    {# 指标信息#}
                    <div class="row L1">
                        <div class="col-md-12">
                            <div class="box box-primary">
                                <div class="box-header with-border">
                                    <h3 class="box-title">收益概览</h3>
                                    <div>
                                        <p></p>
                                        <table class="display table table-striped tablelist">
                                            <tbody>
                                            <tr style="background-color: #dddddd" class="even">
                                                <th data-align="center" style="color: #333;">起始日期</th>
                                                <th data-align="center" style="color: #333;">结束日期</th>
                                                <th data-align="center" style="color: #333;">回测收益</th>
                                                <th data-align="center" style="color: #333;">回测年化收益</th>
                                                <th data-align="center" style="color: #333;">夏普率</th>
                                                <th data-align="center" style="color: #333;">索提诺比率</th>
                                                <th data-align="center" style="color: #333;">calmar比率</th>
                                                <th data-align="center" style="color: #333;">年化波动率</th>
                                                <th data-align="center" style="color: #333;">最大回撤</th>
                                            </tr>
                                            <tr class="even">
                                                <td data-align="center" id="start_date" style="color: #333;"></td>
                                                <td data-align="center" id="end_date" style="color: #333;"></td>
                                                <td data-align="center" id="total_return" style="color: #333;"></td>
                                                <td data-align="center" id="annual_return" style="color: #333;"></td>
                                                <td data-align="center" id="sharpe_ratio" style="color: #333;"></td>
                                                <td data-align="center" id="sortino_ratio" style="color: #333;"></td>
                                                <td data-align="center" id="calmar_ratio" style="color: #333;"></td>
                                                <td data-align="center" id="annual_volatility"
                                                    style="color: #333;"></td>
                                                <td data-align="center" id="max_draw_down" style="color: #333;"></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="box-header with-border">
                                    <h3 class="box-title">净值曲线</h3>
                                </div>
                                <div class="box-body " style="padding: 10px; height:350px;">
                                    <div id="cumulativereturns" style="height: 230px; width: 100%;">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Main content -->
    <body>
    <section class="content">
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                <li class="active" style="margin-top:10px"><a href="#fa-pack" data-toggle="tab">历史回测</a></li>
            </ul>
            <div class="tab-content">
                <input type="text" name="" id="stgid_back" value="{{ stgid }}" style="display: none">
                <input type="text" name="" id="back_detail" style="display: none">
                <!--我的策略头部-->
                <div class="tab-pane active" id="fa-hpquery">
                    <div style="float: left;color: red;margin-left: 174px;margin-top: -10px; display: none"
                         id="date_spaninfo"></div>
                    <table class="table-demo" id="BackTable">
                    </table>
                </div>
            </div>
        </div>
    </section>
    </body>
{% endblock %}

{% block scripts %}

    <script type="text/javascript">
        var columns = [
            {
                field: "stgid",
                title: "策略ID",
                {#sortable: true //设置库存列可以排序#}
                {#visible: false#}
            }, {
                field: "stgname",
                title: "策略名称",
                {#sortable: true //设置库存列可以排序#}
                visible: false
            }, {
                field: "batchid",
                title: "回测ID",
                {#width: 100#}
            }, {
                field: "CustomerID",
                title: "执行时间",
                visible: false
            }, {
                field: "starttime",
                title: "开始时间",
                {#formatter: function (data, row, index) {#}
                {#    return data.split("T").join(" ")#}
                {# }#}
            }, {
                field: "endtime",
                title: "结束时间",
            }, {
                field: "runstatus",
                title: "状态",
                formatter: function (data, row, index) {
                    if (data === "1") {
                        return "运行中"
                    } else if (data === "2") {
                        return "待分析"
                    } else if (data === "3") {
                        return "已结束"
                    } else {
                        return data
                    }
                }
            }, {
                field: "Option",
                title: "操作",
                formatter: function (data, row, index) {
                    return "<span style='width: 60px' onclick=\"detail_back('" + row.stgid + "','" + row.batchid + "')\" class='btn btn-success btn-xs btn-flat btn_operation' data-toggle='modal' > <i class='fa'></i>查看详情</span> ";
                }
            }
        ]

        $(function () {
            getData()
        })

        //获取策略数据
        function getData() {
            var stg_id = $("#stgid_back").val()
            $.ajax({
                url: '/myback/back_detail/',
                type: "post",
                data: {"stgid": stg_id},
                success: function (data) {
                    if (data["type"] === 1) {
                        loadoff()
                        //初始化 bootstrap table
                        $("#BackTable").bootstrapTable("destroy").bootstrapTable({
                            {#clickToSelect:true,#}
                            columns: columns,
                            {#classes: "table table-bordered table-striped",#}
                            data: rendertable(data["back_obj_list"]),
                            height: 500,
                            {#search: true,#}
                            toolbar: "#toolbar",
                            toolbarAlign: "right",
                            //******前端分页设置****
                            pagination: true,
                            pageNumber: 1,
                            pageSize: 20,
                            pageList: [10, 20, 50, 200],
                            paginationHAlign: "right",
                            paginationDetailHAlign: "left"
                            //******前端分页设置****
                        })
                    } else {
                        alert(data["back_obj_list"])
                    }
                }
            })
        }

        //渲染页面
        function rendertable(data) {
            var objlist = JSON.parse(data);
            var objtable = []
            for (let i = 0; i < objlist.length; i++) {
                {#console.log(objlist[i].fields["region"]);#}
                {#console.log(objlist[i].fields["region"].length);#}
                objlist[i].fields["starttime"] = objlist[i].fields["region"].slice(0,19)
                objlist[i].fields["endtime"] = objlist[i].fields["region"].slice(24,43)
                objtable.push(objlist[i].fields)
            }
            return objtable
        }

        var stgid, stgname = null

        {#//查看详情#}
        {#function detail_back(stg_id) {#}
        {#    $("div.modal-body > input").val("")#}
        {#    $("#create-stg").modal("show")#}
        {# }#}

        //查看详情逻辑
        function detail_back(stgid, batchid) {
            //收益概览获取值
            var td_ele = $("tr.even").children("td");
            td_ele.each(function () {
                $(this).text("-")
            })

            //遍历td，将后台获取的值根据元素的id进行渲染。
            $.get(" {% url 'myback:back_incomeStatistics' %}", {'stgid': stgid, "batchid": batchid}, function (r) {
                console.log(r)
                if (r) {
                    for (const key in r) {
                        if ($('#' + key)) {
                            $('#' + key).text(r[key]);
                        }

                    }
                }
            });

            //净值曲线获取值 + 图像渲染
            $.get("{%url 'myback:back_cumulativereturns'%}", {'stgid': stgid, "batchid": batchid}, function (result) {
                setTimeout(function () {
                    var myChart = echarts.init(document.getElementById('cumulativereturns'));
                    var option = {
                        tooltip: {
                            trigger: 'axis',
                            formatter: function (obj) {
                                return obj[0].seriesName + ":" + obj[0].value + '<br>';
                            }
                        },
                        grid: {
                            left: '5%',   // 与容器左侧的距离
                            right: '5%', // 与容器右侧的距离
                            top: '5%',   // 与容器顶部的距离
                            bottom: '22%', // 与容器底部的距离
                        },
                        dataZoom: [
                            {
                                show: true,
                                realtime: true,
                                start: 0,
                                end: 100
                            },
                            {
                                type: 'inside',
                                realtime: true,
                                start: 0,
                                end: 100
                            }
                        ],
                        xAxis: {
                            type: 'category',
                            data: null,
                            scale: true
                        },
                        yAxis: {
                            type: 'value',
                            scale: true
                        },
                        series: [{
                            name: '净值',
                            data: null,
                            type: 'line',
                        },
                        ]
                    };
                    option.series[0].data = result.retData;
                    option.xAxis.data = result.retDate;
                    myChart.setOption(option);
                }, 500)

            })

            $("#modal_backtest_detail").modal("show")

        }


    </script>

    <style>

        .table-demo {
            width: 80%;
            margin: 0 auto 0px auto;
        }


    </style>

{% endblock %}